<template>
  <div>
    <el-row :gutter="10" style="margin-top: 10px">
      <el-col :span="5">
        <el-input
          style="width: 100%"
          size="small"
          clearable
          placeholder="输入关键字进行过滤"
          v-model="treeFilterText"
        ></el-input>
        <div style="text-align: right; margin-top: 2px">
          <el-button @click="treeListRefresh" type plain circle size="mini">
            <i class="el-icon-refresh"></i>
          </el-button>
          <el-popover
            ref="popover1"
            v-model="addMenuVisiable"
            placement="bottom"
            title="添加菜单"
            :width="250"
            trigger="click"
          >
            <template #default="scope">
              <el-input
                v-model="addMenucNameModel"
                placeholder="请输入中文名称"
                size="small"
              ></el-input>
              <el-input
                style="margin-top: 4px"
                v-model="addMenueNameModel"
                placeholder="请输入英文名称"
                size="small"
              ></el-input>
              <span
                v-show="addMenuPopoverErrorMsg"
                style="color: red; font-size: 14px"
                >请填写</span
              >
              <div style="float: right; margin-top: 8px; text-align: right">
                <el-button
                  size="mini"
                  type="text"
                  @click="setAddMenuVisiable(false)"
                  >取消</el-button
                >
                <el-button type="primary" size="mini" @click="saveAddMenu"
                  >确定</el-button
                >
              </div>
            </template>
            <!-- <template #reference> -->
            <el-button
              style="margin-left: 2px"
              slot="reference"
              type
              plain
              circle
              size="mini"
            >
              <i class="el-icon-plus"></i>
            </el-button>
            <!-- </template> -->
          </el-popover>
        </div>
        <el-scrollbar>
          <div v-loading="treeLoading" :style="{ height: treeHeight }">
            <el-tree
              ref="tree"
              :data="treeData"
              :props="treeProps"
              @node-click="nodeClick"
              :filter-node-method="filterNode"
              default-expand-all
              highlight-current
            ></el-tree>
          </div>
        </el-scrollbar>
      </el-col>
      <el-col :span="19">
        <base-crud-table
          ref="crud"
          :loading="loading"
          :option="crudOption"
          :data="crudData.rows"
          :before-open-dialog="beforeOpenDialog"
          :page="page"
          @page-change="pageChange"
          @add-submit="addSubmit"
          @row-edit-submit="rowEditSubmit"
          @row-del="rowDel"
          @refresh="refresh"
          @row-dblclick="onRowDblclick"
        ></base-crud-table>
      </el-col>
    </el-row>
  </div>
</template>
<script src="./setup.js">
</script>
<style scoped>
</style>